// =====================================
// 1. Flexbox 布局
// =====================================

/**
 * @mixin flex-container
 * @description Flex 容器的常用属性封装。
 * @param {string} @direction - flex-direction，默认：row
 * @param {string} @justify - justify-content，默认：flex-start
 * @param {string} @align - align-items，默认：stretch
 * @param {string} @wrap - flex-wrap，默认：nowrap
 * @param {string} @gap - gap (行/列间距)，默认：0 (可使用 rpx, px, em 等)
 * @param {string} @align-content - align-content (多行对齐)，默认：normal (与stretch类似，除非有特殊需求)
 */
 .flex-container(
  @direction: row,
  @justify: center,
  @align: center,
  @wrap: nowrap,
  @gap: 0,
  @align-content: normal
) {
  display: flex;
  flex-direction: @direction;
  justify-content: @justify;
  align-items: @align;
  flex-wrap: @wrap;
  gap: @gap;
  align-content: @align-content;
}

/**
 * @mixin flex-item
 * @description Flex 子项的常用属性封装。
 * @param {number} @grow - flex-grow，默认：0
 * @param {number} @shrink - flex-shrink，默认：1
 * @param {string} @basis - flex-basis，默认：auto (可使用 rpx, px, %)
 * @param {number} @order - order，默认：0
 * @param {string} @align-self - align-self，默认：auto
 */
.flex-item(
  @grow: 0,
  @shrink: 1,
  @basis: auto,
  @order: 0,
  @align-self: auto
) {
  flex: @grow @shrink @basis; // flex 缩写
  order: @order;
  align-self: @align-self;
}

// =====================================
// 2. 居中布局
// =====================================

/**
 * @mixin center-content
 * @description 使用 flex 或 grid 将内容水平垂直居中。
 * @param {string} @display - 容器的 display 属性，默认：flex
 */
.center-content(@display: flex) {
  display: @display;
  justify-content: center;
  align-items: center;
}

/**
 * @mixin center-block-h
 * @description 块级元素水平居中（左右 margin: auto）。
 */
.center-block-h() {
  margin-left: auto;
  margin-right: auto;
}

/**
 * @mixin absolute-center
 * @description 使用绝对定位将元素水平垂直居中。
 * @param {string} @transform-x - transform x 偏移，默认：-50%
 * @param {string} @transform-y - transform y 偏移，默认：-50%
 */
.absolute-center(@transform-x: -50%, @transform-y: -50%) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(@transform-x, @transform-y);
}

// =====================================
// 3. 尺寸控制
// =====================================

/**
 * @mixin size
 * @description 设置元素的宽度和高度。
 * @param {string} @width - 宽度，默认：auto
 * @param {string} @height - 高度，默认：auto
 */
.size(@width: auto, @height: auto) {
  width: @width;
  height: @height;
}

/**
 * @mixin min-size
 * @description 设置元素的最小宽度和最小高度。
 * @param {string} @min-width - 最小宽度，默认：0
 * @param {string} @min-height - 最小高度，默认：0
 */
.min-size(@min-width: 0, @min-height: 0) {
  min-width: @min-width;
  min-height: @min-height;
}

/**
 * @mixin max-size
 * @description 设置元素的最大宽度和最大高度。
 * @param {string} @max-width - 最大宽度，默认：none
 * @param {string} @max-height - 最大高度，默认：none
 */
.max-size(@max-width: none, @max-height: none) {
  max-width: @max-width;
  max-height: @max-height;
}


// =====================================
// 5. 定位与层级
// =====================================

/**
 * @mixin position-fixed
 * @description 绝对定位并覆盖全屏（fixed）。
 * @param {string} @top - top 距离，默认：0
 * @param {string} @right - right 距离，默认：0
 * @param {string} @bottom - bottom 距离，默认：0
 * @param {string} @left - left 距离，默认：0
 * @param {number} @z-index - z-index，默认：1
 */
.position-fixed(@top: auto, @right: auto, @bottom: auto, @left: auto, @z-index: false) {
  position: fixed;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
  z-index: @z-index;
}

/**
 * @mixin position-absolute
 * @description 绝对定位。
 * @param {string} @top - top 距离，默认：auto
 * @param {string} @right - right 距离，默认：auto
 * @param {string} @bottom - bottom 距离，默认：auto
 * @param {string} @left - left 距离，默认：auto
 * @param {number} @z-index - z-index，默认：auto
 */
.position-absolute(@top: auto, @right: auto, @bottom: auto, @left: auto, @z-index: auto) {
  position: absolute;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
  z-index: @z-index;
}


// =====================================
// 6. 辅助工具
// =====================================

/**
 * @mixin hidden
 * @description 隐藏元素。
 */
.hidden() {
  display: none !important;
}

/**
 * @mixin ellipsis
 * @description 单行文本溢出显示省略号。
 */
.ellipsis() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * @mixin multi-ellipsis
 * @description 多行文本溢出显示省略号 (需要指定行数，配合 display: -webkit-box)。
 * @param {number} @lines - 显示的行数，默认：2
 * @param {string} @line-height - 行高，默认：1.5em (建议与实际行高匹配)
 */
.multi-ellipsis(@lines: 2, @line-height: 1.5em) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: @lines;
  line-height: @line-height; // 确保行高与文本一致，避免截断偏差
  max-height: @lines * unit(@line-height, ~""); // 计算最大高度以配合行高
}

